<template>
  <div>
    <ul @scroll="scrollTop">
      <li v-for="item in 20" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>
<style lang="scss">
div {
  overflow: none;
}
ul {
  overflow: auto;
}
li {
  background: pink;
  height: 100px;
  margin: 10px;
}
</style>
<script>
export default {
  data() {
    return {
      oldScrollTop: 0,
      scrollTop: 0,
    };
  },
  watch: {
    scrollTop(newValue, oldValue) {
      setTimeout(() => {
        if (newValue == window.scrollY) {
          console.log("滚动结束", newValue);
          this.oldScrollTop = newValue;
        }
      }, 200);
      if (this.oldScrollTop == oldValue) {
        console.log("滚动开始", oldValue);
      }
    },
  },
  methods: {
    handleScroll() {
      window.addEventListener("scroll", () => {
        this.scrollTop = window.scrollY;
      });
    },
  },
  mounted() {
    this.handleScroll();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", () => {
      this.scrollTop = window.scrollY;
    });
  },
};
</script>